Table of Contents

• 1.Three styles using css
• 2. How to select / identify a element in HTML
• 3. Colors in css
• 4. Font in css
• 5. Box modle in CSS
  • How to set margin or padding
• 6. Button in CSS
• 7. Hyperlink in css
• 8. Formatting in CSS
  • After using float, remenber to clear it!
• 9. Position in CSS
  • It means, the absolute only for their parent node, not for the root node
• 10. More exercises
  • Overall look(without css)

CSS

• Cascading Stylesheets
• Not a programming language
• formatting and customizing style of html file

1.Three styles using css

• external style
  • store in .css file
  • using <link> in a html file to call css file

    <link rel="stylesheet" href="./css/style.css">

• internal style
  • no external .css file
  • put css part into <style> in a html file

    <style>
      h1 {
          color: rebeccapurple;
      }
    </style>

• inline style
  • only for one element
  • using style property within that element

    <h1 style="color: red;">Hello World</h1>

2. How to select / identify a element in HTML

• Using tage
• Using class
• Using id (unique)

• Example

  • In .html file

      <div class="container">
      <div class="box1">
          <h1 style="color: red;">Hello World</h1>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias hic eaque dolores labore laboriosam cupiditate dolorum ab exercitationem eius, consequuntur, corporis vel aspernatur quidem obcaecati at modi dicta repudiandae illum quae totam libero, ducimus est nulla dolor? Doloremque vel natus suscipit laborum assumenda ab corrupti. Ratione vero in quo quibusdam est animi error eos deserunt illum atque laboriosam nesciunt, voluptatum, dicta nam optio saepe aperiam cupiditate beatae cum et? Unde, commodi aperiam vitae illum illo est et sunt consequatur? Illum ad sed, fugit sequi tempore quaerat eligendi laudantium amet perspiciatis corporis illo. Consectetur fugiat beatae officia, sunt at magnam saepe?</p>
      </div>
    </div>

  • In .css file

    .box1 {
    background-color: antiquewhite;
    color: royalblue;
    }
    
    .container{
      width: 80%;
      margin: auto;
    }

3. Colors in css

body {
    background-color: #f4f4f4;
    color: #555555;

}


.box1 {
    background-color: antiquewhite;
    color: royalblue;
}

4. Font in css

• when the font name contains space, we should use quotation mark to refer it
• could input multiple fonts, would follow the order to use them

• Example

  .box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: lem;
    word-spacing: 2em;
  }

5. Box modle in CSS

• When two box comes together, only keep the larger margin as the shared margin

How to set margin or padding

• Example

  .box1 {
    background-color: antiquewhite;
    color: royalblue;
  
    border: 5px cyan solid;
    border-right: 10px green dotted;
    border-bottom: 1px firebrick double;
    border-top: 8px blueviolet dashed;
  
    padding-top: 10px;
    padding-right: 10px;
    margin-top: 20px;
  }

.box2 {
    border: 5px dotted #cccccc;
    border-radius: 30px;
    padding: 20px;
    margin: 20px;
}

6. Button in CSS

button:hover{
    background-color: red;
}

button:active {
    background-color: antiquewhite;
}
button {
    background-color: #444444;
    color: #ffffff;
    padding: 10px 15px;
}

7. Hyperlink in css

a {
    text-decoration: none;
    color: #555555;
}

a:hover {
    color: cyan;
}

a:visited {
    color: darkblue;
}

8. Formatting in CSS

.block {
    float: left;
    width: 33%;
    padding: 10px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}

#main-block {
    float: left;
    width: 70%;
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

#side-block {
    float: left;
    width: 30%;
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.clearfix {
    clear: both;
}

After using float, remenber to clear it!

.list2 li:nth-child(even){
    background-color: grey;
}
.list2 li:first-child {
    background-color: red;
}
.list2 li:nth-child(3) {
    background-color: aqua;
}

9. Position in CSS

• the offset of relative based on the original position without the offset
• the offset of absolute based on the current view window

.box2 {
    border: 5px dotted #cccccc;
    border-radius: 30px;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.box2 h1 {
    position: absolute;
    top: 30px;
    left: 20px;
}

It means, the absolute only for their parent node, not for the root node

• fixed button

  #fixed {
    position: fixed;
    right: 0;
    bottom: 200px;
  }

10. More exercises

Do more exercises on this website: https://developer.mozilla.org/en-US/docs/Learn/CSS

Overall look(without css)

from IPython.display import IFrame
IFrame(src='./index.html', width=1000, height=600)